<template>
  <div class="c-p15">
    <view v-if="list.length > 0">
      <!-- <view class="c-flex c-flex-between">
        <view @click="show = true"
          ><text class="c-mr10">全部类型</text>
          <u-icon name="arrow-down-fill" size="20"></u-icon>
        </view>
      </view> -->
      <view class="mt15" v-for="item in list" :key="item.id">
        <quanItem @ling="ling" :item="item" type="use" index="1" :keyong="true"></quanItem>
      </view>
    </view>
    <view class="c-mt100" v-else>
      <u-empty text="尚无优惠券" mode="list"></u-empty>
    </view>
    <!-- <u-popup v-model="show" mode="bottom" border-radius="14" :closeable="true" height="590">
      <view class="c-mt60 c-fw600">
        <view class="c-text-center">类型</view>
      </view>
      <view class="youBox">
        <view class="c-flex c-mt30 c-flex-between">
          <view
            class="quanbox"
            :style="{
              color: active == 'all' ? '#FF6A21' : '#000',
              background: active == 'all' ? '#FFE1D3' : '#eee',
              border: active == 'all' ? '1px solid #FF6A21' : ' 2px solid rgba(0,0,0,0)'
            }"
            @click="choose('all')"
            >全部类型</view
          >
          <view
            class="quanbox"
            :style="{
              color: active == 'zhekou' ? '#FF6A21' : '#000',
              background: active == 'zhekou' ? '#FFE1D3' : '#eee',
              border: active == 'zhekou' ? '1px solid #FF6A21' : ' 2px solid rgba(0,0,0,0)'
            }"
            @click="choose('zhekou')"
            >折扣券</view
          >
        </view>
        <view class="c-flex c-mt60 c-flex-between">
          <view
            class="quanbox"
            :style="{
              color: active == 'manjian' ? '#FF6A21' : '#000',
              background: active == 'manjian' ? '#FFE1D3' : '#eee',
              border: active == 'manjian' ? '1px solid #FF6A21' : ' 2px solid rgba(0,0,0,0)'
            }"
            @click="choose('manjian')"
            >满减券</view
          >
        </view>
      </view>
    </u-popup> -->
  </div>
</template>
<script>
  import url from '../../common/util/url'
  import quan from '@/services/youhuiquan'
  import quanItem from '@/commponents/youhuiquan/index'

  export default {
    components: {quanItem},
    data() {
      return {
        params: '',
        list: [],
        show: false,
        active: 'all',
        scrollCol: '',
        search: {
          orderAmount: '',
          productId: ''
        }
      }
    },
    methods: {
      ling(obj) {
        if (this.search.productId == '') {
          uni.setStorageSync('quan', [])
          uni.setStorageSync('quanchangquan', obj)
        } else {
          uni.setStorageSync('quanchangquan', '')
          if (!uni.getStorageSync('quan')) {
            uni.setStorageSync('quan', [])
          }
          let quanS = uni.getStorageSync('quan')
          let a = quanS.find(i => {
            return i.productId === this.search.productId
          })
          if (a) {
            quanS.find(i => {
              if (i.productId === this.search.productId) {
                i.id = obj.id
                i.userCouponId = obj.userCouponId
                i.discountType = obj.discountType
                i.discountValue = obj.discountValue
              }
              return i.productId === this.search.productId
            })
            uni.setStorageSync('quan', quanS)
          } else {
            let arr = uni.getStorageSync('quan')
            arr.push({...obj, productId: this.search.productId})
            uni.setStorageSync('quan', arr)
          }
        }

        uni.navigateBack({
           delta: 1
        });
      },
      choose(type) {
        this.active = type
        if (type === 'all') {
          this.search = {
            discountType: '1,2',
            page: 1,
            limit: 10
          }
        }
        if (type === 'zhekou') {
          this.search = {
            discountType: '1',
            page: 1,
            limit: 10
          }
        }
        if (type === 'manjian') {
          this.search = {
            discountType: '2',
            page: 1,
            limit: 10
          }
        }
        this.show = false
        this.getList(true)
      },
      getList(type) {
        quan.usableList(this.search).then(data => {
          if (type) {
            this.list = []
          }
          this.list.push(...data)
          this.list.forEach((item, index) => {
            this.list[index].productList = []
          })
        })
      }
    },
    onShow() {
      this.params = url.getCurrentPageParam()
      this.search.orderAmount = this.params.money
      this.search.productId = this.params.id
      this.getList()
    }
  }
</script>
<style lang="scss" scoped>
  .c-flex {
    display: flex;
  }
  .c-w70 {
    width: 70%;
  }
  .c-flex-between {
    justify-content: space-between;
  }
  .c-p15 {
    padding: 30rpx;
  }
  .goodsBox {
    width: 100%;
  }
  .c-mr10 {
    margin-right: 10rpx;
  }
  .mt15 {
    margin-top: 15px;
  }
  .c-fs-20 {
    font-size: 20rpx;
  }
  .xiao {
    width: 100%;
    height: 200rpx;
  }
  .lingqu {
    right: 10px;
    top: 35px;
    button {
      width: 153rpx;
      font-size: 12px;
      padding: 0;
      margin: 0;
      border: 0;
      color: #fff;
      background: #ff6a21;
      border-radius: 80px;
    }
  }
  .youBox {
    width: 80%;
    margin: 70rpx auto;
  }
  .da {
    width: 100%;
    height: 390rpx;
  }
  .xiaoBox {
    top: 0px;
    width: 100%;
    height: 200rpx;
    line-height: 170rpx;
    padding-left: 22px;
    box-sizing: border-box;
    padding-right: 10px;
  }
  .daBox {
    top: 0px;
    width: 100%;
    background: gray;
    height: 390rpx;
    padding-left: 10px;
    box-sizing: border-box;
    padding-right: 10px;
  }
  .dayou {
    position: absolute;
    top: 20rpx;
    left: 20rpx;
    height: 345rpx;
    width: 94%;
  }
  .quanbox {
    width: 258rpx;
    height: 60rpx;
    text-align: center;
    background: #eee;
    line-height: 60rpx;
    font-size: 13px;
    border-radius: 3px;
  }
  .scroll {
    width: 100%;
    overflow: auto;
  }
  .c-w22 {
    width: 22%;
  }
</style>
